<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../作业/p1.css">
<title>无标题文档</title>
</head>

<body>
<div class="topbig">
	<!-- 这里没有音频和视频，git传不了，想要自己去找 -->
	<!-- 这个东西在伸缩页面是还是会乱 -->
	<!-- 里面有些东西是可以点，自己去摸索吧 -->
	 <!-- 有用到一个弹窗的js，其他全部是HTML和css -->
   <div class="top">
   <audio src="../音乐/Mike Liu - 《原神》官网背景音乐.mp3" autoplay controls  muted loop></audio>
	   <a class="logo"><img src="../小米商城_files/index.png"></a>
     <a class="outer"></a>
    
      <div class="erweimabigbox"></div> 
      
      <div class="tv" onClick="kan()"> </div>
      
      <div class="tankuang" id='tan'>
          <video src="../视频/王者.mp4" controls loop></video>
           <div id="guanbi" onClick="guan()">X</div>
      </div>
      
      <div class="erweima"><img src="../小米商城_files/截图 2021-03-32 11.05.11.png"></div>
      
      <div class="more-download-box"><img src="../小米商城_files/i6.png" class="more-download-1" >
           <img src="../小米商城_files/i7.png" class="more-download-2">
      </div>
	   
   </div>  
</div>
<!-- 弹窗js -->
<script >
		  document.getElementById('tan').style.display="none";
		  function kan(){
		     document.getElementById('tan').style.display="";
		  }
		  function guan(){
			 document.getElementById('tan').style.display="none";
		  }
	   </script>
	   
	   
	   
	   
	   
<div class="centerbig-1box">
   
    <div class="center-fenhuajie">风花节</div>
    
    <div class="center-fenhuajie-tiaozhan"><img src="../小米商城_files/i8.png"></div>
    <div class="center-fenhuajie-buttom-1"></div>
     <div class="center-fenhuajie-buttom-2"></div>
     <div class="center-fenhuajie-buttom-3"></div>
</div>







<div class="cs">
<div class="jushebigbox" id="i1">
	<div class="jushebigbox-tit">角色情报</div>
	<div class="jushebeitu1"></div>
	<div class="jueshemingcheng"><img src="../小米商城_files/i19.png"></div>
	<div class="jueshejieshao1"></div>
	<div class="chinaCVbox1">中文CV：喵*酱</div>
	<div class="chinaCVbox2">日文CV：村濑步</div>
	<div class="juesheTVbox"><video src="../视频/温迪.mp4" controls></video></div>
	<div class="jueshetuxiangbuttom1"><a href="#i1" class="a1" ></a></div>
	<div class="jueshetuxiangbuttom2"><a href="#i2" class="a2" ></a></div>
	<div class="jueshetuxiangbuttom3"><a href="#i3" class="a3" ></a></div>
</div>
<div class="jushebigbox" id="i2">
	<div class="jushebigbox-tit">角色情报</div>
	<div class="jushebeitu2"></div>
	<div class="jueshemingcheng"><img src="../小米商城_files/i30.png"></div>
	<div class="jueshejieshao2"></div>
	<div class="chinaCVbox1">中文CV：鱼冻</div>
	<div class="chinaCVbox2">日文CV：木村良平</div>
	<div class="juesheTVbox"><video src="../视频/公子.mp4" controls></video></div>
	<div class="jueshetuxiangbuttom1"><a href="#i1" class="a1" ></a></div>
	<div class="jueshetuxiangbuttom2"><a href="#i2" class="a2" ></a></div>
	<div class="jueshetuxiangbuttom3"><a href="#i3" class="a3" ></a></div>
</div>
<div class="jushebigbox" id="i3">
	<div class="jushebigbox-tit">角色情报</div>
	<div class="jushebeitu3"></div>
	<div class="jueshemingcheng"><img src="../小米商城_files/i31.png"></div>
	<div class="jueshejieshao3"></div>
	<div class="chinaCVbox1">中文CV：张安琪</div>
	<div class="chinaCVbox2">日文CV：加隈亚衣</div>
	<div class="juesheTVbox" style="background-color: #000; text-align: center;line-height: 210px; font-size: 20px ; color: #fff;">
		敬请期待
	</div>
	<div class="jueshetuxiangbuttom1"><a href="#i1" class="a1" ></a></div>
	<div class="jueshetuxiangbuttom2"><a href="#i2" class="a2" ></a></div>
	<div class="jueshetuxiangbuttom3"><a href="#i3" class="a3" ></a></div>
</div>
</div>











<div class="quanxingleirongbigbox">
	<div class="tit">全新内容</div>
	<div class="kuang">
		<div class="jingling-1">
			<div class="jingling-2">
				<img src="../小米商城_files/i13.png" id="1">
				<img src="../小米商城_files/QQ截图202.png" id="2">
			</div>
			<div class="jingling-lefttop buxian">
			<a href="#1">
			<img src="../小米商城_files/i15.png" >
<!--			<img src="../小米商城_files/i14.png" id="1" >-->
			</a></div>
			<div class="jingling-leftbuttom buxian">
			<a href="#2">
			<img src="../小米商城_files/i17.png" >
<!--			<img src="../小米商城_files/i16.png" id="1">-->
			</a></div>
		</div>
	</div>
</div>







<div class="lunbobigbox">
	<div class="tit">游戏特色</div>
	<div class="lunbobox">
      


	   <div class="lunbobox-xian">
		   <div class="lunbobox-fu"><img src="../小米商城_files/lunbo1.jpg"> </div>
			<div class="lunbobox-fu"><img src="../小米商城_files/lunbo2.jpg"> </div>
			<div class="lunbobox-fu"><img src="../小米商城_files/lunbo3.jpg"> </div>
			<div class="lunbobox-fu"><img src="../小米商城_files/lunbo4.jpg"> </div>
			<div class="lunbobox-fu"><img src="../小米商城_files/lunbo5.jpg"> </div>
		</div>

	</div>
	
	<div class="lunbobox2">
		<img src="../小米商城_files/lunbo1.jpg"  id="p1"> 
		<img src="../小米商城_files/lunbo2.jpg"  id="9">
		<img src="../小米商城_files/lunbo3.jpg"  id="p3">
		<img src="../小米商城_files/lunbo4.jpg"  id="p4">
		<img src="../小米商城_files/lunbo5.jpg"  id="p5">
		<div class="lunbobox-qiebuttom">	
		<div class="lunbobox-qiebuttom-zi"><a href="#p1"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#9"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#p3"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#p4"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#p5"><img src="../小米商城_files/bai.png" ></a></div>
	    </div>
	    <div class="lunbobox-qiebuttom-2">	
		<div class="lunbobox-qiebuttom-zi"><a href="#p1"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#9"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#p3"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#p4"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#p5"><img src="../小米商城_files/bai.png" ></a></div>
	    </div>
	    <div class="lunbobox-qiebuttom-3">	
		<div class="lunbobox-qiebuttom-zi"><a href="#p1"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#9"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#p3"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#p4"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#p5"><img src="../小米商城_files/bai.png" ></a></div>
	    </div>
	    <div class="lunbobox-qiebuttom-4">	
		<div class="lunbobox-qiebuttom-zi"><a href="#p1"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#9"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#p3"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#p4"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#p5"><img src="../小米商城_files/bai.png" ></a></div>
	    </div>
	    <div class="lunbobox-qiebuttom-5">	
		<div class="lunbobox-qiebuttom-zi"><a href="#p1"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#9"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#p3"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#p4"><img src="../小米商城_files/bai.png" ></a></div>
		<div class="lunbobox-qiebuttom-zi"><a href="#p5"><img src="../小米商城_files/bai.png" ></a></div>
	    </div>
	</div>
	
</div>








<div 
</body>
</html>
<!--
首页，网页是按区域划分的，而每个划分的地方可以看做是个方形的盒子， 每个盒子 由元素内容，内外边距，边框组成网页其实就是一个个 盒子拼接和嵌套排列起来的，所以盒子模型是网页布局的重点之一。
构造盒子模型主要用<div>标签，div全 称division,中文意思是:“ 分割，区域”。div是块标签,也可以结合id, class

每个盒子都有它的大小，盒子宽和高对应的属性分别为width和height，它们的属性值都可以是不同单位的数值或相对于父标签的百分比

基本属性：
| 设置内容 |样式属性  |常用属性值  | 
|--|--|--|
| 边框样式 | border-style：上[右 下 左] | none（默认），solid（单实线），dashed（虚线），dotted（点线），double （双实线） |
|宽度|border-width：上[右 下 左] |像素值|
|颜色|border-color：上[右 下 左] |颜色值，#十六进制，rgb（r，g，b），rgb（#r，#g，#b），|
|综合设置|border：四边宽，四边样式，四边颜色||
|圆角|border-radius：水平半径参数/垂直半径参数|像素值或百分比|
|图片|border-images：图片路径 裁切方式/边框宽度/边框扩展距离 重复方式||

内外边距属性：
外边距（margin），内边距（padding）。
两者可综合设置，如margin：上 [右 下 左]
也可单一设置，如padding-top：上内边距
属性值通常为像素值或百分比，两者都可以设为负值，若属性值定为auto则意为水平居中。
如果改变padding的值，盒子的大小也会跟着改变，如宽=width+padding-left+padding-right

阴影属性：box-shadow
语法：box-shdaow：h-shadow v-shdaow blur spread color inset
|参数值|描述  |
|--|--|
| h-shadow | 水平阴影的位置（可为负，必选） |
|v-shadow| 垂直阴影的位置（可为负，必选）|
|blur|阴影模糊半径（可选）|
|spread|阴影扩展半径（不可为负，可选）|
|color|阴影颜色（可选）|
|outset/inset|默认为外阴影/内阴影（可选）|-->
